<template>
  <el-select v-model="dictDataKeyId" size="small" ref="myref" style="width:100%" filterable clearable @change="returnChange" :placeholder="dictDataName">
    <el-option
        v-for="dict in dictDataList"
        :key="dict.dictCode"
        :label="dict.dictLabel"
        :value="dict.dictCode"
    ></el-option>
    </el-select>
</template>

<script>
import { getDicts } from "@/api/system/dict/data";

export default {
  data() {
    return {
      dictDataList : [],
      dictDataKeyId : '',
      dictLabel:''
    };
  },
  model:{
    prop:'dictCode',
    event: 'change'
  },
  watch:{
    dictCode : function(newValue, oldValue){
      this.dictDataKeyId = newValue;
    }
  },
  props: {
    //用于绑定和初始ID
    dictCode: 0,
    // 字典的类型
    dictDataType : '',
    // 字典的名称
    dictDataName : '',
    myref : '',
  },
  methods: {
    returnChange(val){
      let obj = {};
      obj = this.dictDataList.find((dict)=>{//遍历list的数据
          return dict.dictCode === val;//筛选出匹配数据
      });
      this.dictLabel = obj.dictLabel;
      this.$emit('change', this.dictDataKeyId);
    },
  },
  created() {
    getDicts(this.dictDataType).then(response => {
      this.dictDataList = response.data;
    });
  },
};
</script>
